<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>数据概览</span>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                style="float: right; margin-right: 20px;"
                @change="handleDateChange">
              </el-date-picker>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="data-card">
                  <div class="data-title">公文总数</div>
                  <div class="data-value">{{ statistics.documentCount }}</div>
                  <div class="data-trend">
                    <span :class="statistics.documentTrend > 0 ? 'up' : 'down'">
                      {{ statistics.documentTrend > 0 ? '+' : '' }}{{ statistics.documentTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-card">
                  <div class="data-title">会议总数</div>
                  <div class="data-value">{{ statistics.meetingCount }}</div>
                  <div class="data-trend">
                    <span :class="statistics.meetingTrend > 0 ? 'up' : 'down'">
                      {{ statistics.meetingTrend > 0 ? '+' : '' }}{{ statistics.meetingTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-card">
                  <div class="data-title">任务总数</div>
                  <div class="data-value">{{ statistics.taskCount }}</div>
                  <div class="data-trend">
                    <span :class="statistics.taskTrend > 0 ? 'up' : 'down'">
                      {{ statistics.taskTrend > 0 ? '+' : '' }}{{ statistics.taskTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="data-card">
                  <div class="data-title">公告总数</div>
                  <div class="data-value">{{ statistics.noticeCount }}</div>
                  <div class="data-trend">
                    <span :class="statistics.noticeTrend > 0 ? 'up' : 'down'">
                      {{ statistics.noticeTrend > 0 ? '+' : '' }}{{ statistics.noticeTrend }}%
                    </span>
                    较上期
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
  
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>公文处理情况</span>
            </div>
            <div class="chart-container">
              <div id="documentChart" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>任务完成情况</span>
            </div>
            <div class="chart-container">
              <div id="taskChart" style="width: 100%; height: 300px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>各部门工作量统计</span>
            </div>
            <div class="chart-container">
              <div id="departmentChart" style="width: 100%; height: 400px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>报表导出</span>
            </div>
            <el-form :inline="true" class="export-form">
              <el-form-item label="报表类型">
                <el-select v-model="exportForm.type" placeholder="请选择">
                  <el-option label="公文统计报表" value="document"></el-option>
                  <el-option label="会议统计报表" value="meeting"></el-option>
                  <el-option label="任务统计报表" value="task"></el-option>
                  <el-option label="部门工作量报表" value="department"></el-option>
                  <el-option label="综合统计报表" value="all"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="导出格式">
                <el-select v-model="exportForm.format" placeholder="请选择">
                  <el-option label="Excel" value="excel"></el-option>
                  <el-option label="PDF" value="pdf"></el-option>
                  <el-option label="Word" value="word"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="exportForm.dateRange"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleExport">导出报表</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  // 引入echarts
  import * as echarts from 'echarts'
  
  export default {
    name: 'Report',
    data() {
      return {
        dateRange: [new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date()],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        statistics: {
          documentCount: 156,
          documentTrend: 12.5,
          meetingCount: 78,
          meetingTrend: 8.3,
          taskCount: 245,
          taskTrend: -5.2,
          noticeCount: 42,
          noticeTrend: 15.8
        },
        exportForm: {
          type: 'all',
          format: 'excel',
          dateRange: [new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date()]
        },
        documentChart: null,
        taskChart: null,
        departmentChart: null
      }
    },
    mounted() {
      this.initCharts()
    },
    beforeDestroy() {
      if (this.documentChart) {
        this.documentChart.dispose()
      }
      if (this.taskChart) {
        this.taskChart.dispose()
      }
      if (this.departmentChart) {
        this.departmentChart.dispose()
      }
    },
    methods: {
      handleDateChange() {
        // 实际项目中应该根据日期范围重新获取数据
        console.log('日期范围变更:', this.dateRange)
        // 重新初始化图表
        this.initCharts()
      },
      initCharts() {
        this.initDocumentChart()
        this.initTaskChart()
        this.initDepartmentChart()
      },
      initDocumentChart() {
        // 初始化公文处理情况图表
        this.documentChart = echarts.init(document.getElementById('documentChart'))
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '公文处理情况',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 85, name: '已完成' },
                { value: 35, name: '处理中' },
                { value: 25, name: '待处理' },
                { value: 11, name: '已逾期' }
              ]
            }
          ]
        }
        this.documentChart.setOption(option)
      },
      initTaskChart() {
        // 初始化任务完成情况图表
        this.taskChart = echarts.init(document.getElementById('taskChart'))
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['已完成', '进行中', '未开始', '已逾期']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['研发部', '市场部', '销售部', '人事部', '财务部']
          },
          series: [
            {
              name: '已完成',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [20, 15, 12, 8, 6]
            },
            {
              name: '进行中',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [15, 10, 8, 5, 3]
            },
            {
              name: '未开始',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [10, 8, 5, 7, 4]
            },
            {
              name: '已逾期',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [5, 3, 2, 1, 2]
            }
          ]
        }
        this.taskChart.setOption(option)
      },
      initDepartmentChart() {
        // 初始化各部门工作量统计图表
        this.departmentChart = echarts.init(document.getElementById('departmentChart'))
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['公文数量', '会议数量', '任务数量', '完成率']
          },
          xAxis: [
            {
              type: 'category',
              data: ['研发部', '市场部', '销售部', '人事部', '财务部', '行政部'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              name: '完成率',
              min: 0,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          series: [
            {
              name: '公文数量',
              type: 'bar',
              data: [45, 30, 25, 20, 18, 15]
            },
            {
              name: '会议数量',
              type: 'bar',
              data: [20, 25, 15, 10, 5, 8]
            },
            {
              name: '任务数量',
              type: 'bar',
              data: [60, 45, 40, 30, 25, 20]
            },
            {
              name: '完成率',
              type: 'line',
              yAxisIndex: 1,
              data: [85, 78, 82, 90, 95, 88]
            }
          ]
        }
        this.departmentChart.setOption(option)
      },
      handleExport() {
        this.$message({
          message: `正在导出${this.getExportTypeName()}，请稍候...`,
          type: 'success'
        })
        // 实际项目中应该调用API进行导出
        setTimeout(() => {
          this.$message({
            message: `${this.getExportTypeName()}导出成功！`,
            type: 'success'
          })
        }, 2000)
      },
      getExportTypeName() {
        const typeMap = {
          document: '公文统计报表',
          meeting: '会议统计报表',
          task: '任务统计报表',
          department: '部门工作量报表',
          all: '综合统计报表'
        }
        return typeMap[this.exportForm.type]
      }
    }
  }
  </script>
  
  <style scoped>
  .data-card {
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    height: 120px;
  }
  .data-title {
    font-size: 16px;
    color: #606266;
    margin-bottom: 10px;
  }
  .data-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 10px;
  }
  .data-trend {
    font-size: 14px;
    color: #909399;
  }
  .up {
    color: #67C23A;
  }
  .down {
    color: #F56C6C;
  }
  .chart-container {
    padding: 10px;
  }
  .export-form {
    padding: 10px;
  }
  </style>